<template>
	<view>
		<view v-if="list.length === 0" class="do-content">
			<text class="do-icon iconfont icon-wutu"></text>
			<h3 class="do-h3">{{flag ? '还没有收藏过壁纸哦~' :'还没有下载过壁纸哦~' }}</h3>
			<button @tap="jump()" class="button">{{flag ? '去收藏' :'去下载' }}</button>
		</view>

		<view v-else>
			<!-- 清空数据 -->
			<view @tap="clear()" class="clear">
				<text class="clear-icon iconfont icon-tubiao_qingchu"></text>
			</view>
			<!-- 交错式瀑布流组件 -->
			<waterfallFlow :list="list"></waterfallFlow>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			flag: {
				type: Boolean
			},
			list: {
				type: Array,
				default: true
			}
		},
		data() {
			return {};
		},
		methods: {
			// 去下载
			jump() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 封装清空数据
			clearData() {
				uni.showModal({
					title: '确定清空壁纸记录吗？',
					confirmColor:'#24bfa5',
					cancelColor:'#959595',
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							if (this.flag) {
								this.$emit('clearLike',[])
								uni.showToast({
									icon: 'none',
									title: '已清空'
								})
							} else {
								this.$emit('clearDownload', [])
								uni.showToast({
									icon: 'none',
									title: '已清空'
								})
							}

						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: '出错啦！'
						})
					}
				})
			},
			// 清空数据
			clear() {
				if (this.flag) {
					// 清空收藏过的壁纸
					this.clearData()
				} else {
					// 清空已下载的壁纸记录
					this.clearData()
				}
			},
		},
		onLoad() {


		}
	}
</script>

<style lang="scss" scoped>
	.do-content {
		text-align: center;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);

		.do-icon {
			font-size: 100rpx;
			color:#24bfa5 ;
		}

		.do-h3 {
			margin-top: 50rpx;
		}

		.button {
			margin-top: 50rpx;
			width: 280rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			font-size: 36rpx;
			border-radius: 50rpx;
			text-align: center;
			background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(255, 94, 247, 1) 17.8%, rgba(2, 245, 255, 1) 100.2%);
		}
	}

	.clear {
		background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(243, 107, 255, 1.0) 17.8%, rgba(2, 245, 255, 1) 100.2%);
		margin:20rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50%;
		text-align: center;
		box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
		transform: translate(400%,0);

		.clear-icon {
			font-size: 36rpx;
			color: #fff;
		}
	}
</style>